import React from 'react'
import { useLocation,useParams } from 'react-router-dom';
import qs from 'qs';

export default function Music() {
  /* 
    useLocation:可以获取当前的路由地址信息
      - path：当前的路由地址
      - search：查询字符串形式的路由传参

      - state: 在编程式路由导航的位置传入state参数
  */
const location = useLocation()

const { user,} = qs.parse(location.search.split("?")[1])

const musicList = location.state

// Params传参直接拿到路径中的id
console.log(useParams());
const {id}=  useParams()

  return (
    <div>
        <p>用户名是{user} 编号是:{id}</p>
        {
          musicList.map((item)=>{
            return <li key = {item.id}>{item.name}</li>
          })
        }
    </div>
  )
}
